<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="outerVisible = true"
          >新增</el-button
        >
      </div>
      <el-table :data="list" border style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="编号"
          align="center"
          width="80"
        >
        </el-table-column>
        <el-table-column prop="pic" label="商品图片" align="center" width="180">
          <template slot-scope="scope">
            <img
              :src="scope.row.pic"
              alt=""
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="活动时间"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <p>开始时间：{{ scope.row.promotionStartTime }}</p>
            <p>结束时间：{{ scope.row.promotionEndTime }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="publishStatus"
          label="是否过期"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.publishStatus == 1">是</p>
            <p v-else>否</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          align="center"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="brandName"
          label="品牌名称"
          align="center"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="price" label="商品价格" width="200">
        </el-table-column>
        <el-table-column
          prop="productCategoryName"
          label="商品类别"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200">
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="text"
              size="small"
              style="color: red"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="外层 Dialog" :visible.sync="outerVisible" width="80%">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>卡片名称</span>
        </div>
        <el-form ref="form" :model="form">
          <el-row :gutter="20">
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <el-form-item>
                  <el-input
                    size="mini"
                    v-model="form.name"
                    placeholder="请输入商品名称"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="grid-content bg-purple">
                <el-form-item>
                  <el-input
                    size="mini"
                    v-model="form.productSn"
                    placeholder="商品货号"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="4"
              ><div class="grid-content bg-purple">
                <el-form-item>
                  <el-select
                    size="mini"
                    v-model="form.region"
                    placeholder="品牌"
                  >
                    <el-option
                      :label="item.name"
                      :value="item.id"
                      v-for="(item, index) in product"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="4"
              ><div class="grid-content bg-purple">
                <el-form-item>
                  <el-select
                    size="mini"
                    v-model="form.publishStatus"
                    placeholder="上架状态"
                  >
                    <el-option label="下架" :value="0"></el-option>
                    <el-option label="上架" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="4"
              ><div class="grid-content bg-purple">
                <el-form-item>
                  <el-select v-model="form.verifyStatus" placeholder="审核状态">
                    <el-option label="审核" :value="0"></el-option>
                    <el-option label="审核通过" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>

            <el-col :span="4"
              ><div class="grid-content bg-purple">
                <el-form-item>
                  <el-button @click="rlus">重置</el-button>
                  <el-button type="primary" @click="onSubmit">搜索</el-button>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>商品列表</span>
        </div>
        <el-table :data="title" height="550" border style="width: 100%">
          <el-table-column
            fixed
            type="index"
            align="center"
            label="序号"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="checked"
            label="选择"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.checked"
                @change="addactive(scope.row)"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            prop="pic"
            label="商品图片"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <img
                :src="scope.row.pic"
                alt=""
                style="wdith: 100px; height: 100px"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="商品名称"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="price"
            label="商品价格"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <p>原价:{{ scope.row.originalPrice }}</p>
              <p>现价:{{ scope.row.price }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="productCategoryName"
            label="商品类别"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="weight"
            label="商品重量"
            align="center"
            width="150"
          >
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.doot.start"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>

      <el-dialog
        width="70%"
        title="编辑限时活动"
        :visible.sync="innerVisible"
        append-to-body
        style="padding: 20px"
      >
        <el-row :gutter="20" style="margin-bottom: 20px">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <span>商品原价</span><span>{{ RecommendVo.price }}</span>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <span>商品名称</span><span>{{ RecommendVo.name }}</span>
            </div></el-col
          >
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 20px">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <p>促销价格</p>
              <el-input-number
                v-model="RecommendVo.promotionPrice"
                :min="1"
                :max="99999999"
                label="促销价格"
              ></el-input-number></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <p>排序</p>
              <el-input-number
                v-model="RecommendVo.sort"
                :min="0"
                :max="1"
                label="排序"
              ></el-input-number></div
          ></el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 20px">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <div class="block">
                <span class="demonstration">开始时间</span>
                <el-date-picker
                  v-model="RecommendVo.promotionStartTime"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <div class="block">
                <span class="demonstration">结束时间</span>
                <el-date-picker
                  v-model="RecommendVo.promotionEndTime"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div></div
          ></el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 20px">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <span>活动限购数量</span
              ><el-input
                v-model="RecommendVo.promotionPerLimit"
                placeholder="请输入数量"
              ></el-input></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <p>商品图片</p>
              <img
                :src="RecommendVo.pic"
                alt=""
                style="width: 150px; height: 150px"
              /></div
          ></el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addtime">确定</el-button>
          <el-button @click="innerVisible = false">取 消</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = true"
          >打开内层 Dialog</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script >
import {
  findAllRecommends,
  productsByPage,
  findAllBrand,
  addRecommend,
  delRecommend,
} from "@/api/myd/index";
export default {
  data() {
    return {
      list: [],
      title: [],
      product: [],
      doot: {
        start: 1,
        limit: 10,
      },
      total: 0,
      form: {
        brandId: "", //商品品牌id
        id: "",
        name: "", //商品名称
        productCategoryId: "", //商品分类id
        productSn: "", //商品货号
        publishStatus: "", //上架状态，0->下架；1->上架
        verifyStatus: "", //审核状态
      },
      outerVisible: false,
      innerVisible: false,
      RecommendVo: {
        promotionStartTime: "", //促销开始时间
        promotionEndTime: "", //促销结束时间
        brandNameL: "", //品牌名称 ,
        name: "", //商品名称
        pic: "",
        price: "", //原价
        promotionPrice: "", //促销接个
        sort: "", //排序
        productId: "", //商品id
        productSn: "", //
        promotionPerLimit: "", //限购数量
      },
    };
  },
  created() {
    var _this = this;
    findAllBrand().then((res) => {
      console.log(res);
      if (res.success) {
        _this.product = res.data.items;
      }
    });
    this.findAllRecommendsAPI();
    this.productsByPageAPI();
  },
  components: {},

  computed: {},

  mounted() {},

  methods: {
    //   删除活动
    handleClick(row) {
      var _this = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(row.recommendId);
          delRecommend(row.recommendId).then((res) => {
            console.log(res);
            if (res.success) {
              _this.$message.success("删除成功");
              _this.findAllRecommendsAPI();
            } else {
              _this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //   添加限时活动
    addtime() {
      var _this = this;
      console.log(this.RecommendVo);
      addRecommend(this.RecommendVo).then((res) => {
        console.log(res);
        if (res.success) {
          _this.$message.success("添加成功");
          // _this.$router.push({path:"/marketing"})
          _this.outerVisible = false;
          _this.innerVisible = false;
          _this.findAllRecommendsAPI();
          _this.productsByPageAPI();
        } else {
          _this.$message.error("添加失败");
        }
      });
    },
    //   分页查询
    handleSizeChange(val) {
      var _this = this;
      this.doot.limit = val;
      this.productsByPageAPI();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      var _this = this;
      this.doot.start = val;
      console.log(`当前页: ${val}`);
      this.productsByPageAPI();
    },
    //   新增活动
    addactive(row) {
      console.log(row);
      this.RecommendVo = {
        promotionStartTime: "", //促销开始时间
        promotionEndTime: "", //促销结束时间
        brandNameL: row.brandName, //品牌名称 ,
        name: row.name, //商品名称
        pic: row.pic,
        price: row.price, //原价
        promotionPrice: "", //促销接个
        sort: "", //排序
        productId: row.id, //商品id
        productSn: "", //
        promotionPerLimit: "", //限购数量
      };
      this.innerVisible = true;
    },
    //   内层索索
    onSubmit() {
      console.log(this.form);
      this.$data.doot = this.$options.data().doot;
      this.productsByPageAPI();
    },
    rlus() {
      this.$data.form = this.$options.data().form;
    },
    findAllRecommendsAPI() {
      var _this = this;
      findAllRecommends().then((res) => {
        console.log(res);
        if (res.success) {
          _this.list = res.data.items;
        }
      });
    },
    productsByPageAPI() {
      var _this = this;
      productsByPage(this.doot.start, this.doot.limit, this.form).then(
        (res) => {
          console.log(res, "内部数据表");
          res.data.rows.forEach((ele) => {
            ele.checked = false;
          });
          _this.title = res.data.rows;
          _this.total = res.data.total;
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.box-card {
  margin: 30px;
}
</style>